<template>
  <view class=" margin-sm" style="padding-bottom: 50px">
    <view class="cu-bar bg-white margin-top-xs">
      <view class="action sub-title">
        <text class="text-xl text-bold text-shadow text-custom">核销详情</text>
        <text class="text-ABC text-custom">VerifyOrder</text>
      </view>
    </view>
      <view class='padding flex text-center text-grey bg-white shadow-warp-my'>
        <view class='flex flex-sub flex-direction solid-right'>
          <view class="text-xxl text-custom">{{ detailInfo.totalPrice ||0 }}</view>
          <view class="margin-top-sm text-orange">
            <text class='cuIcon-hot' ></text> 订单金额</view>
        </view>

        <view class='flex flex-sub flex-direction'>
          <view class="text-xxl text-custom">{{detailInfo.totalVerifPrice||0}}</view>
          <view class="margin-top-sm text-orange">
            <text class='cuIcon-like'></text> 核销金额</view>
        </view>
        <view class='flex flex-sub flex-direction solid-right'>
          <view class="text-xxl text-custom ">{{detailInfo.wechatPrice||0}}</view>
          <view class="margin-top-sm text-orange">
            <text class='cuIcon-evaluate'></text> 提现金额</view>
        </view>
      </view>

      <view class="bg-white padding margin-top-xs">
        <view class="cu-steps">
          <view class="cu-item" :class="index>basics?'':'text-orange'" v-for="(item,index) in basicsList" :key="index">
            <text :class="index>basics?'cuIcon-title':'cuIcon-' + item.cuIcon"></text> {{item.name}}
          </view>
        </view>
      </view>
    <view >
      <view class="cu-form-group">
        <view class="vlabel"><font class="vname">申请时间:</font>{{detailInfo.verifyTime}}</view>
      </view>
      <view class="cu-form-group">
        <view class="vlabel"><font class="vname"> 申请进度:</font>{{detailInfo.examineVerifyName}} || {{detailInfo.tixianFlagName}}</view>
      </view>
    </view>
    <view>
      <view class="cu-bar bg-white margin-top-xs">
        <view class="action sub-title">
          <text class="text-xl text-shadow text-custom">核销订单</text>
          <text class="text-ABC text-custom">VerifyOrder</text>
        </view>
      </view>
      <verify-order-detail-one-list v-for="(item, index) in list" :orderDetail="item"></verify-order-detail-one-list>
    </view>
    <!-- 资讯按钮 -->

  </view>
  <view class="cu-bar bg-white tabbar shop shadow edit-fixed" >
    <view class="submit text-xl text-custom-bg text-white" @tap.stop="closeVerify">
      <text class="text-white">关闭</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import {verifyDetail} from '@/common/api/order'
import {onLoad} from '@dcloudio/uni-app'
import {ref, onMounted, reactive} from 'vue';
import {useStore} from "@/common/store";
import VerifyOrderDetailOneList from "../../components/VerifyOrderDetailOneList.vue";
const id = ref(0)
const flag = ref(1)
const detailInfo = ref({})
const list = reactive([])
const basics = 0;
const basicsList = ref( [{
  cuIcon: 'usefullfill',
  name: '开始'
}, {
  cuIcon: 'radioboxfill',
  name: '审核完成'
}, {
  cuIcon: 'roundclosefill',
  name: '待提现'
}, {
  cuIcon: 'roundcheckfill',
  name: '提现完成'
}]);

const hxId = ref(0)

const closeVerify = () => {
  uni.switchTab({
    url:'/pages/home/index'
  })
}

// todo 核销结果
onLoad((options) => {
  hxId.value = options.id
})

onMounted(()=>{
  loadList()
  console.log(id.value)
})

const store = useStore();

const loadList = async () => {
  await verifyDetail(id.value).then(res => {
    if (res.code == 200) {
      detailInfo.value = res.data;
      detailInfo.verifyTime =formatDateTime(new Date(res.data.verifyTime),'yyyy.MM.dd hh:mm:ss')||'-'
      // 体现进度判断，进到这个页面，申请一定有了，就看审核，如果审核通过了，在看体现，审核不通过也是结束了
      detailInfo.flag = 1
      detailInfo.zt = res.data.examineVerifyName
      if(res.data.examineVerify > 0) {
        detailInfo.flag = 2
        if (res.data.tixianFlag > 0) {
          detailInfo.zt = res.data.tixianFlagName
          detailInfo.flag = 3
        }
      }

      // totalMoney.value = res.data.wechatPrice
      if(res.data.orderDetails) {
        res.data.orderDetails.forEach(item=>{
          list.push(item)
        })
      }
    }
  })
}
onLoad(option=>{
  id.value = option.id
})

const formatDateTime = (date, format) => {
  console.log('data:',date)
  const o = {
    'M+': date.getMonth() + 1, // 月份
    'd+': date.getDate(), // 日
    'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
    'H+': date.getHours(), // 小时
    'm+': date.getMinutes(), // 分
    's+': date.getSeconds(), // 秒
    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
    S: date.getMilliseconds(), // 毫秒
    a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
    A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
  };
  if (/(y+)/.test(format)) {
    format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  for (let k in o) {
    if (new RegExp('(' + k + ')').test(format)) {
      format = format.replace(
          RegExp.$1,
          RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
      );
    }
  }
  return format;
}
</script>

<style lang="scss" scoped>

.indexes {
  height: 70vh;
  margin-top: 50px;
}
.edit-fixed {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 1024;
  //box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
}

</style>
